import * as React from 'react';
import {Text, View} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Dynamic from '../../views/Dynamic';
import Pay from '../../views/Pay';
import My from '../../views/My';
import Home from '../../views';
import Icon from 'react-native-vector-icons/AntDesign';
const HomeStack = createNativeStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator screenOptions={{headerShown: false}}>
      <HomeStack.Screen name="Home" component={Home} />
    </HomeStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();
export default function BottomTabs() {
  return (
    // <NavigationContainer>
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName = '';
          if (route.name === 'Home') {
            iconName = 'home';
          } else if (route.name === 'Dynamic') {
            iconName = 'paperclip';
          } else if (route.name === 'Pay') {
            iconName = 'shoppingcart';
          } else if (route.name === 'My') {
            iconName = 'user';
          }

          if (route.name === 'Release') {
            return (
              <View
                style={{
                  backgroundColor: '#fb7299',
                  width: 30,
                  height: 30,
                  borderRadius: 5,
                  marginTop: 15,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text style={{fontSize: 20, color: '#fff'}}>+</Text>
              </View>
            );
          }

          // You can return any component that you like here!
          // return <Text>{iconName}</Text>;
          return <Icon name={iconName} color={color} size={20}></Icon>;
        },
        tabBarActiveTintColor: '#fb7299',
        tabBarInactiveTintColor: 'gray',
        headerShown: false,
      })}>
      <Tab.Screen
        name="HomeStackScreen"
        component={HomeStackScreen}
        options={{title: '首页'}}
      />
      <Tab.Screen
        name="Dynamic"
        component={Dynamic}
        options={{title: '动态'}}
      />
      <Tab.Screen
        name="Release"
        component={HomeStackScreen}
        options={{title: ''}}
      />
      <Tab.Screen name="Pay" component={Pay} options={{title: '会员购'}} />
      <Tab.Screen name="My" component={My} options={{title: '我的'}} />
    </Tab.Navigator>
    // </NavigationContainer>
  );
}
